<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment::head(_,~{::link})"/>
<link rel="stylesheet" th:href="@{/js/md/css/editormd.css}">
<style>
    .editormd-preview-container, .editormd-html-preview {
        padding: 0;
    }
    #add_comment{
        display: block;
        background: #040404;
        color: #fff;
        border: 0;
        line-height: 30px;
        margin-top: 5px;
        padding: 0 20px;
        border-radius: 5px;
        float: right;
        cursor: pointer;
    }
</style>
<body>
<!--top begin-->
<header th:replace="fragment::header"/>
<div th:replace="fragment::search"/>
<!--top end-->
<article>
    <!--lbox begin-->
    <div class="lbox">
        <div class="content_box whitebg">
            <h2 class="htitle"><span class="con_nav">您现在的位置是：<a href="/">首页</a>&nbsp;>&nbsp;<a href="index6.html"
                                                                                               th:href="@{'/category/' +${article.category.id}}"
                                                                                               th:text="${article.category.title}">设计心得</a></span>[[${article.category.title}]]
            </h2>
            <h1 class="con_tilte" th:text="${article.title}">Come on,行动起来吧!我们和时间来一场赛跑!</h1>
            <p class="bloginfo"><i class="avatar"><img src="/img/avatar.jpg"></i><span></span>
                <span th:text="${#temporals.format(article.updateTime,'yyyy-MM-dd HH:mm:ss')}">2018-11-07</span>
                <span th:text="${'【'+article.category.title+'】'}">【设计心得】</span><span>[[${article.browse}]]人已围观</span>
            </p>
            <p class="con_info"><b>简介[[${article.introduction}]]</b></p>
            <div class="con_text" id="my-content" th:utext="${article.content}">
                &quot;时间过得那么飞快,使我的小心眼儿里不只是着急,还有悲伤.有一天,我放学回家,看到太阳快落山了,就下决心说:&quot;我要比太阳更快地回家.&quot;我狂奔回去,站在庭院前喘气的时候,看到太阳还露着半边脸,我高兴地跳跃起来,那一天我跑赢了太阳.以后我就时常做那样的游戏,有时和太阳赛跑,有时和西北风比快,有时一个暑假才能做完的作业,我十天就做完了;那时我三年级,常常把哥哥五年级的作业拿来做.每一次比赛胜过时间,我就快乐得不知道怎么形容.&quot;&nbsp;
                这是节选自林清玄的文章&lt;和时间赛跑&gt;<br><br>读到这里的时候,我不禁感慨,我怎么没有和时间来一个比赛,我也要跑赢它.好比说我们做博客,如果你不给自己定一个期限,总是在&quot;打算做&quot;的阶段,那永远都停滞不前,永远都跑不赢时间.&nbsp;如果你想做一个博客,赶紧行动起来,给自己定一个时间期限,买域名,买空间,备案,制作模板,,,一步一步来实现,停滞不前,注定就会输了这场比赛.<br><br>很多网友都说我的个人博客优化做得好,排名总是靠前,非常羡慕.要知道我做了博客那么长的时间,在时间上我就赢了,这就是所谓的赢在了起跑线.但是也不是说起跑线输了,就追不上了,个人博客关键字词做好,其次内容也是非常重要的,一定要坚持更新.我有段时间就好久不曾更新,因为我要一边带孩子,一边做我的工作,没有时间去做新的模板,我也看到很多新的个人博客出现了,而且排名很好,所以我们要比别人多点儿努力,多点儿精力,是可以追上的.<br><br>我也要和时间来一场比赛.我会跑赢它的,给我自己加油吧!<br><br><img
                    alt="" src="static/picture/95bd939d9662b780865146eec440d8a7.jpg">
            </div>
            <div class="con_text_bottom">
                <p><span>Tags：</span><a class="tag" th:each="tag:${article.tags}" th:text="${tag.name}"
                                        th:href="@{'/tag/'+${tag.name}}" target="_blank">阿里云</a></p>
                <p class="share"><b>转载：</b>感谢您对SpringBoot个人博客网站平台的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人站长或者朋友圈，但转载请说明文章出处“来源SpringBoot个人博客”。<a
                        th:href="@{'/article/'+${article.id}}" th:text="${#httpServletRequest.getRequestURL()}"
                        target="_blank">/xd/1.html</a>
                </p>
                <p><span class="diggit" th:data-id="${article.id}">
                    <a href="JavaScript:;"> 很赞哦！ </a>(<b id="diggnum" th:text="${article.up}">0</b>)</span></p>
            </div>
            <div class="nextinfo">
                <th:block th:if="${articlePre}">
                    <p>上一篇：<a href='index6.html' th:href="@{'/article/' +${articlePre.id}}"
                              th:text="${articlePre.title}">返回列表</a></p>
                </th:block>
                <th:block th:unless="${articlePre}">
                    <p>上一篇：没有上一篇</p>
                </th:block>

                <th:block th:if="${articleEnd}">
                    <p>下一篇：<a href='2.html' th:href="@{'/article/' +${articleEnd.id}}" th:text="${articleEnd.title}">网易博客关闭，何不从此开始潇洒行走江湖！</a>
                    </p>
                </th:block>
                <th:block th:unless="${articleEnd}">
                    <p>上一篇：没有下一篇</p>
                </th:block>
            </div>
        </div>
        <div class="whitebg">
            <h2 class="htitle">相关文章</h2>
            <ul class="otherlink">
                <li th:each="reArticle:${reArticles}">
                    <a href="23.html" th:href="@{'/article/' +${reArticle.id}}" th:title="${reArticle.title}"
                       target="_blank" th:text="${reArticle.title}"></a></li>
            </ul>
        </div>
        <div class="whitebg gbook">
            <h2 class="htitle">文章评论</h2>
            <ul>
                <div class="fb" th:each="comment:${article.comments}">
                    <ul><p class="fbtime"><span th:text="${comment.createTime}"></span> [[${comment.username}]]</p>
                        <p class="fbinfo" th:text="${comment.content}"></p></ul>
                </div>
            </ul>
            <form action="/comment/add" method="post">
                <div id="plpost">
                    <p class="saying"><span>共有0条评论</span>来说两句吧...
                    </p>
                    <div style="display:flex">
                        <div>
                            <p class="yname"><span>用户名:</span>
                                <input name="username" type="text" class="inputText" id="username" value=""
                                       size="16">
                            </p>
                            <p class="yzm"><span>验证码:</span>
                                <input name="code" type="text" class="inputText" size="16">
                            </p>
                        </div>
                        <div>
                            <img src="/kaptcha/render" align="absmiddle" name="plKeyImg" id="plKeyImg"
                                 onclick="plKeyImg.src='/kaptcha/render?t='+Math.random()" title="看不清楚,点击刷新">
                        </div>
                    </div>
                    <textarea name="comment" rows="6" id="saytext"></textarea>
                    <input type="button" class="submit_comment" id="add_comment" value="提交">
                    <input type="hidden" name="id" value="1" th:value="${article.id}">
                </div>
            </form>
        </div>
    </div>
    <!--lbox end-->
    <div class="rbox">
        <div class="whitebg paihang">
            <h2 class="htitle">点击排行</h2>
            <section class="topnews imgscale">
                <a href="/article/7.html" th:href="@{'/article/' +${hotArticle.id}}">
                    <img th:src="${hotArticle.cover}" src="/img/b02.jpg">
                    <span th:text="${hotArticle.title}">安静地做一个爱设计的女子</span>
                </a>
            </section>
            <ul>
                <li th:each="hotArticle1:${hotArticles}">
                    <i></i><a href="/article/14.html" th:href="@{'/article/' +${hotArticle1.id}}"
                              th:title="${hotArticle1.title}" th:text="${hotArticle1.title}"
                              target="_blank">十条设计原则教你学会如何设计网页布局!</a>
                </li>
            </ul>
        </div>
        <div class="whitebg cloud">
            <h2 class="htitle">标签云</h2>
            <ul>
                <a th:each="tag:${hotTagList}" th:text="${tag.name}" th:href="@{'/tag/'+${tag.name}}" target="_blank">光尖子</a>
            </ul>
        </div>
    </div>
</article>
<footer th:replace="fragment::footer"/>
<script th:src="@{/js//md/editormd.js}"></script>
<script th:src="@{/js//md/lib/marked.min.js}"></script>
<script th:src="@{/js//md//lib/prettify.min.js}"></script>
<script>
    editormd.markdownToHTML("my-content");
    $("#add_comment").click(function () {
        let id = $("input[name='id']").val();
        let username = $("input[name='username']").val();
        let code = $("input[name='code']").val();
        let comment = $("#saytext").val();
        $.post("/comment/add", {id: id, username: username, code: code, comment: comment}, function (res) {
            if (res.code == 200) {
                window.location.reload();
            }
            alert(res.msg);
        });
        return false;
    })
    var dianzan=false;
    $(".diggit").click(function () {
        if(dianzan)return false;
        dianzan=true;
        let num = $("#diggnum").text();
        let article_id = $(this).data('id');
        $("#diggnum").text(parseInt(num)+1);
        $.post("/article/"+article_id, {}, function (res) {
            if (res.code == 200) {
                window.location.reload();
            }
            alert(res.msg);
        });
    });
</script>
</body>
</html>
